<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/ui-base.css"> -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/cookie.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .wrap {
            width: 1140px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
            height: 600px;
        }

        .wrapBox {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }

        .wrapBox img {
            width: 100%;
            height: 100%;
        }

        .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            left: 0;
            top: 0;

            display: none;
        }

        .showBigImg {
            width: 400px;
            height: 400px;
            float: left;
            background-color: #0000004d;
            overflow: hidden;
            position: absolute;
            left: 500px;
            top: 0;

            display: none;

        }

        .showBigImg img {
            position: absolute;
            /* z-index: -1; */
            width: 800px;
            height: 800px;
        }

        .switchList {
            width: 400px;
            margin-top: 20px;
            display: flex;
        }

        .switchList li {
            flex: 1;
            margin: 5px;
            border: 1px solid transparent;
        }

        .switchList .active {
            border-color: red;
        }

        .switchList li img {
            width: 100%;
        }

        .wrap .left {
            float: left;
        }

        .wrap .right {
            float: left;
            /* overflow: hidden; */
            width: 640px;
            margin-left: 100px;
            background-color: #6ff;
            min-height: 400px;
        }

        .wrap .right h2 {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .wrap .right>div {
            margin-bottom: 20px;
        }

        .detailBox {
            width: 1140px;
            margin: 0 auto;
        }
    </style>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="./login.html">你好,请登录</a>
        <a href="./register.html">注册</a>
    </div>
    <div class="wrap">
        <div class="left">
            <!-- <div class="wrapBox">
                <div class="shadow"></div>
                <img class="small"
                    src="https://img11.360buyimg.com/n5/s400x400_jfs/t1/174003/28/2628/48961/606e65e0E63231bf3/0068d7c05330ed88.jpg"
                    alt="">
            </div>
            <ul class="switchList">
                <li class="active"><img
                        src="https://img11.360buyimg.com/n5/s400x400_jfs/t1/174003/28/2628/48961/606e65e0E63231bf3/0068d7c05330ed88.jpg"
                        bigImg="../images/girlbig1.jpg" alt=""></li>
                <li><img src="https://img11.360buyimg.com/n5/s400x400_jfs/t1/174003/28/2628/48961/606e65e0E63231bf3/0068d7c05330ed88.jpg"
                        bigImg="../images/girlbig2.jpg" alt=""></li>
                <li><img src="https://img11.360buyimg.com/n5/s400x400_jfs/t1/174003/28/2628/48961/606e65e0E63231bf3/0068d7c05330ed88.jpg"
                        bigImg="../images/girlbig3.jpg" alt=""></li>
                <li><img src="https://img11.360buyimg.com/n5/s400x400_jfs/t1/174003/28/2628/48961/606e65e0E63231bf3/0068d7c05330ed88.jpg"
                        bigImg="../images/girlbig4.jpg" alt=""></li>
            </ul>
            <div class="showBigImg">
                <img class="bigImg"
                    src="https://img11.360buyimg.com/n5/s400x400_jfs/t1/174003/28/2628/48961/606e65e0E63231bf3/0068d7c05330ed88.jpg"
                    alt="">
            </div> -->
        </div>
        <div class="right">
            <!-- <h2>小米11(5G)骁龙888处理器【12期免息可选/10重豪礼】1亿像素游戏手机 蓝色 全网通12GB+256GB</h2>
            <div class="price">
                京 东 价:￥ <span>4699.00</span> 降价通知
            </div>
            <div class="buyNum">
                <span class="reduce">-</span>
                <input type="number" value="1">
                <span class="add">+</span>
            </div>
            <button class="addToCar">
                加入购物车
            </button> -->
        </div>
    </div>
    <div class="detailBox">

    </div>
</body>
<script>
    var cookie = document.cookie;
    if (cookie) {  // 标识用户身份
        var user = getCookie("lgc");
        if (user) {
            $(".box").html(`欢迎您,${user} <button onclick="exit()">退出</button>`);
        }
    }
    // function queryString() {
    //     var 
    // }

    var search = location.search;
    if (search) {  //有gid数据 
        console.log(search);
        var gid = search.split("=")[1];
        console.log(gid);
        (async function () {

            let result = await searchGoodsById({ gid })
            console.log(result);

            var { status, data: { goodsName, goodsPrice, bigPicList, smallPicList } } = result;
            if (status) {  //有数据 (根据gid能查到数据);
                var leftHTML = `<div class="wrapBox">
                            <div class="shadow"></div>
                            <img class="small"
                                src="${bigPicList[0]}"
                                alt="">
                        </div>
                        <ul class="switchList">
                           
                        </ul>
                        <div class="showBigImg">
                            <img class="bigImg"
                                src="${bigPicList[0]}"
                                alt="">
                        </div>`

                $(".left").html(leftHTML);

                var listHTML = "";
                var len = smallPicList.length;
                for (var i = 0; i < (len > 4 ? 4 : len); i++) {
                    var img = smallPicList[i];
                    listHTML += `<li><img src="${img}" bigUrl="${bigPicList[i]}" alt=""></li>`

                }
                $(".switchList").html(listHTML);
                $(".switchList li").eq(0).addClass("active");


                var rightHTML = `<h2>${goodsName}</h2>
            <div class="price">
                京 东 价:￥ <span>${goodsPrice}</span> 降价通知
            </div>
            <div class="buyNum">
                <span class="reduce">-</span>
                <input class="count-input" type="number" value="1">
                <span class="add">+</span>
            </div>
            <button class="addToCar">
                加入购物车
            </button>`
                $(".right").html(rightHTML);

                // $(".switchList li").click(function () {
                //     $(this).addClass("active").siblings().removeClass("active");
                //     var index = $(this).index();
                //     // bigPicList[index];
                //     console.log(11111);
                //     $(".bigImg,.small").prop("src", bigPicList[index]);
                // })



            } else {
                location.href = "./index1.html";
            }

        })()
    } else {
        location.href = "./index1.html";
    }


    $(document).on("click", ".switchList li", function () {
        $(this).addClass("active").siblings().removeClass("active");
        var url = $(this).find("img").attr("bigUrl");
        $(".bigImg,.small").prop("src", url);
    })

    $(document).on("click", ".addToCar", async function () {
        console.log("点击加入购物车");

        // 加入购物车  需要知道的信息  
        // 谁?  买了什么东西 ?  买了多少件?
        // 谁?  => 当前登录的用户
        // 买了什么东西?   商品的编号(goodsId) 
        // 买了多少件?   val

        // 谁?   加入购物车之前判断用户是否登录
        var user = getCookie("lgc");  // 当前登录的用户
        console.log(user);
        if (user) {  //有用户登录  => 买
            var buyNum = $(".buyNum .count-input").val();
            console.log(buyNum);
            // addShoppingCar({ user, goodsId: gid, buyNum }).then().catch()

            var result = await addShoppingCar({ user, goodsId: gid, buyNum });
            console.log(result);
            var { status } = result;
            if (status) {
                if (confirm("购买成功,是否进入购物车?")) {
                    location.href = "./shoppingCar.html"
                }
            } else {
                alert("系统繁忙,请稍后...");
            }


        } else {  // 没有登录   => 去登录

            // 问题? 如何让用户登录之后 返回 当前页?
            // 把当前页的url(location.href)  作为一个参数 存储在returnUrl中?

            // 登录成功 就判断 有没有returnUrl => 有  =>  回去
            //                                  没有 => 进入主页

            location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
        }


    })



    function exit() {
        delCookie("lgc");
        location.reload();
    }

</script>

</html>